<template name="prepayItem">
	<view class="orderItem">
		<view class="shopBox">
			<text class="iconfont icon-shoucangdianjia" @tap="toShop"></text>
			<text class="shopName" @tap="toShop">{{orderItem.store.name.length>10?orderItem.store.name.substr(0,10)+'...':orderItem.store.name}}</text>
			<text class="iconfont icon-right" @tap="toShop"></text>
			<text class="orderStatus" @tap="toOrderDt">{{statusArr[orderItem.status]}}{{(orderItem.status==2 && orderItem.tri==1 && (!orderItem.tryTime))?'，待体验':''}}</text>
		</view>
		<view class="goodBox" @tap="toOrderDt">
			<image class="goodImg" :src="orderItem.img"></image>
			<view class="infoBox">
				<text class="goodName">{{orderItem.name}}</text>
				<view class="priceBox">
					<text>{{txtArr[orderItem.status]}}:</text>
					<text class="price">￥{{(orderItem.status==1 ||orderItem.status==2 || orderItem.status==3)?orderItem.payAmount:(orderItem.price - orderItem.discount).toFixed(2)}}</text>
				</view>
				<view class="btnBox">
					<button class="orderOp" v-if="orderItem.groupId" @tap.stop="toPage" :data-stay="orderItem.status" :data-id="orderItem.groupId"
					 data-url="myGroupDetail">拼团详情</button>
					<button class="orderOp" v-if="orderItem.status==1" @tap.stop="toPay">付预约金</button>
					<button class="orderOp" v-if="orderItem.status==2" @tap.stop="toWeikuan">付尾款</button>
					<button class="orderOp" v-if="orderItem.status==3" @tap.stop="toPay">付全款</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	// vuex 导入
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'prepayItem',
		// 计算属性
		computed: {

		},
		// 传递参数
		props: {
			orderItem: {
				type: Object,
				default: null
			},
			showStatus: {
				type: Number,
				default: 0
			}
		},
		// 自身参数
		data() {
			return {
				statusArr: ['全部', '待支付预约金', '待支付尾款', '待支付全款', '待体验', '待开课', '退款中', '已退款', '已关闭', '已完成'],
				txtArr: ['已支付', '待付预约金', '待付尾款', '待付全款', '已支付', '已支付', '已支付', '已支付', '已支付', '已支付'],
				goodInfo: null,
				isRunning: 1,
			}
		},
		// 方法
		methods: {
			getData() {
				// this.$store.dispatch("apiGetGoodDetailById",)
			},
			// 去店铺详情
			toShop() {
				this.toPage({
					url: 'shopDetail',
					id: this.orderItem.store.id
				})
			},
			toPay() {
				this.$store.dispatch("apiGetGoodDetailById", {
					id: this.orderItem.courseId,
					userId: 0
				}).then(res => {
					if (res.data.data.isDelete) { //已删除
						uni.$emit("showDelModal", {
							orderStatus: this.orderItem.status
						})
					} else {
						if (res.data.data.running != 1) { //已下架
							uni.$emit("showDonModal", {
								orderStatus: this.orderItem.status
							})
						} else {
							this.toPage({
								url: 'pay',
								id: this.orderItem.orderNo
							})
						}
					}
				}).catch(res => {
					this.isRunning = 2;
					uni.$emit("showDelModal", {
						orderStatus: this.orderItem.status
					})
				})

			},
			toWeikuan() {
				this.$store.dispatch("apiGetGoodDetailById", {
					id: this.orderItem.courseId,
					userId: 0
				}).then(res => {
					if (res.data.data.isDelete) { //已删除
						uni.$emit("showDelModal", {
							orderStatus: this.orderItem.status
						})
					} else {
						if (res.data.data.running != 1) { //已下架
							uni.$emit("showDonModal", {
								orderStatus: this.orderItem.status
							})
						} else {
							this.toPage({
								url: 'pay',
								id: this.orderItem.orderNo,
								paytype: this.orderItem.payType
							})
						}
					}
				}).catch(res => {
					uni.$emit("showDelModal", {
						orderStatus: this.orderItem.status
					})
				})

			},

			toOrderDt() {
				this.toPage({
					url: 'orderDt',
					id: this.orderItem.orderNo
				})
				// if(this.orderItem.status==6||this.orderItem.status==7){
				// 	this.toPage({
				// 		url:'refoundDt',
				// 		oid:this.orderItem.orderId,
				// 		ono:this.orderItem.orderNo
				// 	})
				// }else{


				// }

			}
		},
		// created声明周期
		created() {

		},

	}
</script>

<style lang="less" scoped>
	.orderItem {
		border-radius: 10upx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		display: flex;
		flex-direction: column;
		margin-bottom: 18upx;
		padding: 36upx 20upx 36upx 36upx;

		.shopBox {
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 36upx;
			}

			.icon-shoucangdianjia {
				color: #202932;
				margin-right: 6upx;
			}

			.icon-right {
				color: #c9c9c9;
			}

			.orderStatus {
				color: #ffb423;
				font-size: 28upx;
				margin-top: -4upx;
				flex-grow: 1;
				text-align: right;
			}

			.shopName {
				font-size: 32upx;
				color: #202932;
				margin-top: -4upx;
			}
		}

		.goodBox {
			display: flex;
			margin-top: 32upx;

			.goodImg {
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
				margin-right: 20upx;
				flex-shrink: 0;
			}

			.infoBox {
				display: flex;
				flex-grow: 1;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}

			.goodName {
				font-size: 28upx;
				color: #202932;
			}

			.priceBox {
				display: flex;
				color: #202932;
				font-size: 28upx;
				align-items: baseline;
			}

			.btnBox {
				width: 100%;
				height: 50upx;
				display: flex;
				justify-content: flex-end;
			}

			.orderOp {
				height: 50upx;
				line-height: 48upx;
				font-size: 28upx;
				color: #ffa023;
				border-radius: 25upx;
				padding: 0 40upx;
				border: 1px solid #ffa023;
				background-color: rgba(0, 0, 0, 0);
				margin: 0;
				align-self: flex-end;
				margin-left: 30upx;
			}

			.orderOp:after {
				outline: none;
				border: none;
			}

			.price {
				color: #ff2020;
				font-weight: bold;
			}
		}
	}
</style>
